<!DOCTYPE html>
<html lang="en">
    <head>
        <title>methods 中参数的传递</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="../assets/js/vue.js"></script>
    </head>
    <body>
        <h1>methods 中参数的传递</h1>
        <hr>
        <div id="app">
            {{number}}
            <p><button @click="add(2,$event)">ADD</button></p>
            <p><heheda1 @click.native="add(2,$event)"></heheda1></p>
            <p><heheda2 @click.native="add(2,$event)"></heheda2></p>
        </div>
        <p><button onclick="app.add(2)">外部APP</button></p>
        <script type="text/javascript">
            Vue.component('heheda1',{
                template:`<button>全局组件APP</button>`
            });
            var heheda2={
                template:`<button>组件APP</button>`
            }
            var app=new Vue({
                el:'#app',
                data:{
                    number:0
                },
                methods:{
                    add:function(num,event){
                        console.log(num);
                        console.log(event);
                        switch(num){
                            case '':this.number++;break;
                            default:this.number+=num;break;
                        }
                    }
                },
                components:{
                   'heheda2':heheda2 
                }
            })
        </script>
    </body>
</html>